<template>
	<view class="">
		<!-- <u-navbar :is-back="false" :background="background" title-color="#ffffff" title="我的"></u-navbar> -->

		<!-- <view class="u-flex user-box u-p-t-40 u-p-l-30 u-p-r-20 u-p-b-30">
			<view class="u-m-r-30">
				<u-avatar :src=" vuex_user.company_logo ? vuex_user.company_logo : pic" size="96"></u-avatar>
			</view>
			<view class="u-flex-1">
				<view class="u-font-18 u-p-b-20">{{vuex_user.Name}}</view>
				<view class="u-font-14 u-tips-color">{{vuex_user.HierarchyName}} </view>
			</view>
		</view> -->
		<view class="top-container">
			<view class="left">
				<u-avatar size="100" :src="vuex_user.HeadPic"></u-avatar>
				<view class="info">
					<text class="name">{{ vuex_user.Name }}</text>
					<view class="status">
						<!-- <u-badge :isDot="true" type="success"></u-badge> -->
						<text class="label-name">{{ vuex_user.HierarchyName }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="">
			<u-cell-group :title-style="{ 'font-size': '30rpx', color: '#555555', 'font-weight': 500 }">
				<u-cell-item title="修改密码" @click="navigator('/pages/personal/editPassword')">
					<u-image class="u-m-r-20" src="@/static/images/personal/note.png" :height="48" :width="48" slot="icon"></u-image>
				</u-cell-item>
			</u-cell-group>
		</view>
		
		<!-- <view class="">
			<u-cell-group :title-style="{ 'font-size': '30rpx', color: '#555555', 'font-weight': 500 }">
				<u-cell-item title="忘记密码" @click="navigator('/pages/personal/forgotPassword')">
					<u-image class="u-m-r-20" src="@/static/images/personal/note.png" :height="48" :width="48" slot="icon"></u-image>
				</u-cell-item>
			</u-cell-group>
		</view> -->

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item title="退出登录" @click="logout">
					<u-image class="u-m-r-20" src="@/static/images/personal/setting.png" :height="48" :width="48" slot="icon"></u-image>
				</u-cell-item>
			</u-cell-group>
		</view>
		
		<view class="safe-area-inset-bottom">
			<u-tabbar  :list="vuex_tabbar" active-color="#ff7624"></u-tabbar>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			pic: 'https://z3.ax1x.com/2021/08/31/hU8poq.png',
			show: true,
			background: {
				backgroundColor: '#F19F41'
			}
		};
	},
	onLoad() {
		uni.setNavigationBarTitle({
			title: '我的'
		});
	},
	methods: {
		logout() {
			let me = this;
			uni.showModal({
				title: '是否确定退出?',
				confirmText: '退出',
				success(e) {
					if (e.confirm) {
						me.$u.vuex('vuex_user', '');
						uni.reLaunch({
							url: '/pages/login/index'
						});
					}
				}
			});
		},

		navigator(url) {
			uni.navigateTo({
				url: url
			});
		},
		toAboutPage() {
			uni.navigateTo({
				url: '/pages/personal/about'
			});
		},
		toSettingsPage() {
			uni.navigateTo({
				url: '/pages/personal/settings/index'
			});
		}
	},

	computed: {
		phone_number() {
			if (this.vuex_user.user_mobile) {
				return this.vuex_user.user_mobile.substr(0, 3) + '****' + this.vuex_user.user_mobile.substr(7);
			}
			return '';
		}
	}
};
</script>

<style>
page {
	background-color: #f3f6fc;
}
</style>

<style lang="scss" scoped>
.camera {
	width: 54px;
	height: 44px;

	&:active {
		background-color: #ededed;
	}
}
.user-box {
	background-color: #fff;
}

.top-container {
	width: 100%;
	background: url(../../static/images/home/home-top-bg.png) no-repeat;
	height: 142px;
	background-size: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.left {
		margin-left: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		.info {
			padding-left: 12px;
			display: flex;
			flex-direction: column;
			color: #fff;

			.name {
				font-size: 16px;
				letter-spacing: 4px;
			}
			.status {
				font-size: 12px;
				display: flex;
				position: relative;
				/deep/.u-badge-dot {
					left: 0px;
					top: 7px !important;
				}
				.label-name {
					// margin-left: 12px;
				}
			}
		}
	}
	.right {
		margin-right: 18px;
		image {
			height: 22px;
			width: 22px;
		}
	}
}
</style>
